{% load static %}
{% load i18n %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="{% get_current_language as LANGUAGE_CODE %}" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<link rel="shortcut icon" href="{% static 'arbiter/imgs/favicon.ico' %}" type="image/vnd.microsoft.icon"/>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>arbiter</title>
    <link href="{% static 'arbiter/css/material-icons.css' %}" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="{% static 'arbiter/css/muse/muse-ui.css' %}"/>
    <link type="text/css" rel="stylesheet" href="{% static 'arbiter/css/muse/theme-teal.min.css' %}"/>
    <link type="text/css" rel="stylesheet" href="{% static 'arbiter/css/navbar.css' %}"/>
    <link type="text/css" rel="stylesheet" href="{% static 'arbiter/css/index.css' %}"/>
    {% block head %}
    {% endblock head %}
</head>
<body style="display: none;">
<script src="{% static 'arbiter/js/vue/vue.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'arbiter/js/vue/vuex.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'arbiter/js/vue/vue-router.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'arbiter/js/vue/vue-resource.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'arbiter/js/muse/muse-ui.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static "arbiter/js/ace/ace.js" %}" type="text/javascript" charset="utf-8"></script>
<div class="arbiter-container">
    {% verbatim %}
    <div id="app">
        <arbiter-navbar></arbiter-navbar>
        <div>
            <div id="root">
                <router-view name="paper"></router-view>
                <arbiter-slide :model-list="modelList"></arbiter-slide>
                <div id="root-case" style="display: block;">
                    <div id="code">
                        <case-float-btn></case-float-btn>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endverbatim %}
</div>
     {% verbatim %}
<template id="menuIconButton">
    <div id="menu-icon-button">
                   <mu-icon-button icon="apps" slot="right" ref="appIcon" @click="appMenuToggle"></mu-icon-button>
            <mu-popover v-if="usernameAbbreviation!=null" :anchor-origin='{"vertical":"bottom","horizontal":"middle"}'
                        :target-origin='{"vertical":"top","horizontal":"middle"}' :trigger="appMenuTrigger"
                        :open="appMenuOpen" @close="appMenuHandleClose">
                <mu-menu>
                    <mu-menu-item title="用例导入" left-icon="add"
                                  @click="openImportDialog"></mu-menu-item>
                    <mu-menu-item href="/arbiter/" title="用例管理" left-icon="mode_edit"></mu-menu-item>
                    <mu-menu-item href="/arbiter/wholog/index.html" title="日志查询" left-icon="history"></mu-menu-item>
                </mu-menu>
            </mu-popover>
        <mu-dialog :open="dialog" title="用例导入" @close="closeImportDialog">
            <mu-text-field v-if="gitCloneStatus == 'finish'" icon="link" v-model="gitUrlPrefix"
                           label="git仓库的URL（例：https://github.com/shimine/cua-caseobjdemo.git）" :width="100"
                           label-float></mu-text-field>
            <mu-flat-button v-if="gitCloneStatus == 'finish'" slot="actions" @click="closeImportDialog" primary
                            label="取消"></mu-flat-button>
            <mu-flat-button v-if="gitCloneStatus == 'finish'" slot="actions" @click="cloneCaseObj" primary
                            label="导入"></mu-flat-button>
            <mu-linear-progress v-if="gitCloneStatus == 'running'" :size="10" color="blue"></mu-linear-progress>
        </mu-dialog>
    </div>
</template>
<template id="userAvatar">
    <div id="user-avatar">
        <mu-avatar v-if="usernameAbbreviation!=null" background-color="lime700" ref="UserAvatar" color="black"
                   :size="40" slot="right" @click="userMenuToggle">{{ usernameAbbreviation }}
        </mu-avatar>
        <mu-popover v-if="usernameAbbreviation!=null" :anchor-origin='{"vertical":"bottom","horizontal":"middle"}'
                    :target-origin='{"vertical":"top","horizontal":"middle"}' :trigger="userMenuTrigger"
                    :open="userMenuOpen" @close="userMenuHandleClose">
            <mu-menu>
                <mu-menu-item title="设置" left-icon="settings"></mu-menu-item>
                <mu-menu-item title="帮助" left-icon="help_outline"></mu-menu-item>
                <mu-divider></mu-divider>
                <mu-menu-item title="退出"
                              @click="logout()" left-icon="power_settings_new"></mu-menu-item>
            </mu-menu>
        </mu-popover>
    </div>
</template>
<template id="arbiterNavbar">
    <div id="arbiter-navbar" :class="{ 'slider-open': sliderIsOpen}">
        <mu-appbar :z-depth="2">
            <mu-icon-button icon="menu" slot="left" @click="toggleSlide()"></mu-icon-button>
            <h2 slot="left">用例管理</h2>
            <mu-text-field icon="search" class="appbar-search-field" hint-text="搜索"></mu-text-field>
            <mu-icon-button v-if="usernameAbbreviation!=null" tooltip="消息" tooltip-position="bottom-right" icon="chat"
                            slot="right"></mu-icon-button>
            <menu-icon-button slot="right" :username-abbreviation="usernameAbbreviation"></menu-icon-button>
            <user-avatar slot="right" v-if="usernameAbbreviation!=null" :username-abbreviation="usernameAbbreviation"></user-avatar>
            <mu-flat-button v-if="usernameAbbreviation==null" href="/arbiter/login" label="登陆" icon="account_circle"
                            class="demo-flat-button" color="lime700" slot="right"></mu-flat-button>
        </mu-appbar>

    </div>
</template>
<template id="arbiterNavSlide">
    <div id="nav-slide">
        <mu-drawer :overlay="true" :z-depth="0" :open="open" :docked="docked" @close="toggle()">
            <mu-appbar title="Arbiter" :z-depth="2"></mu-appbar>
            <mu-list :value="value" @change="handleChange">
                <div v-for="(v, k) in modelList" :key="k">
                    <mu-list-item :title="k" :value="k" toggle-nested :open="false" @click='loadCasePaper(k)'>
                        <mu-icon slot="left" value="wb_cloudy"></mu-icon>
                        <mu-list-item slot="nested" :value="k+kx" :title="kx" v-for="(vx, kx) in v"
                                      v-if="(typeof vx)==='object'" :key="kx"
                                      @click="loadCasePaper(k+'.'+kx)" inset>
                            <mu-icon slot="left" value="looks"></mu-icon>
                            <mu-list-item slot="nested" :value="k+kx+ky" :title="ky" v-for="(vy, ky) in vx"
                                          v-if="(typeof vy)==='object'" :key="ky"
                                          @click="loadCasePaper(k+'.'+kx+'.'+ky)" inset>
                                <mu-icon slot="left" value="wb_sunny"></mu-icon>
                            </mu-list-item>
                        </mu-list-item>
                    </mu-list-item>
                </div>
            </mu-list>
        </mu-drawer>
    </div>
</template>
<template id="casePaper">
    <div id="case-paper">
        <div v-for="(value, key) in caseMap">
            <div>
                <div class="flex-between"><b title="查看/编辑" class="grey-text paper-pyname" @click="showcode(key,value)">{{
                    key }}</b>
                    <mu-icon-button icon="delete" icon-class="red-icon"></mu-icon-button>
                </div>
            </div>
            <div v-if="pyname===key">
                <mu-paper class="long-large-paper" :z-depth="2" :key="key">
                    <code-paper :pypathx="value"></code-paper>
                    <code-float-btn :casemodel="casemodel" :pypath="value"></code-float-btn>
                </mu-paper>
            </div>
            <div v-else v-for="(v, k) in value">
                <mu-paper class="long-little-paper" :z-depth="1" :key="key">
                    <div class="flex-between"><i class="brown800-text paper-casename">{{ v }}</i>
                        <mu-icon-button icon="play_arrow" icon-class="green-icon"
                                        @click="run(k,v)"></mu-icon-button>
                    </div>
                </mu-paper>
            </div>
        </div>
    </div>
</template>
<template id="codePaper">
    <div id="code-paper">
        <div id="codecontent"></div>
    </div>
</template>
<template id="codeFloatBtn">
    <div id="code-float-btn" v-if="modalShow">
        <div style=" position: relative;z-index: 1; float: right;bottom: 80px;right: 60px;"
             @mouseover="onMouseEnterCodeFAB()" @mouseout="onMouseleaveCodeFAB()">
            <mu-float-button style="background-color:#bf360c" @click="edit()" :icon="editIcon"
                             class="demo-float-button"></mu-float-button>
        </div>
        <div>
            <mu-dialog :open="saveDialog" title="保存中">
                <mu-linear-progress v-if="saveStatus == 'running'" :size="10"
                                    color="blue"></mu-linear-progress>
            </mu-dialog>
        </div>
        <div>
            <mu-dialog dialog-class="log-dialog" :open="logDialog" @close="closeLogDialog" title="运行日志"
                       scrollable>
                <p v-for="log, index in logContent" :key="index">{{ log }}</p>
                <mu-flat-button primary label="清空" @click="cleanLog" slot="actions"></mu-flat-button>
                <mu-flat-button primary label="关闭" @click="closeLogDialog"
                                slot="actions"></mu-flat-button>
            </mu-dialog>
        </div>
    </div>
</template>
<template id="caseFloatBtn">
    <div id="case-float-btn" v-if="modalShow">
        <div style="z-index: 1;position: fixed; bottom: 15px; right: 45px;"
             @mouseover="onMouseEnterCodeFAB()" @mouseout="onMouseleaveCodeFAB()">
            <mu-float-button id="log" @click="log()" icon="message" secondary mini
                             class="demo-float-button" v-show="seen"
                             style="bottom: 6px; right: 3px;"></mu-float-button>
            <mu-float-button id="edit" @click="add()" icon="add" class="demo-float-button"></mu-float-button>
        </div>
        <div>
            <mu-dialog dialog-class="log-dialog" :open="logDialog" @close="closeLogDialog" title="运行日志"
                       scrollable>
                <p v-for="log, index in logContent" :key="index">{{ log }}</p>
                <mu-flat-button primary label="清空" @click="cleanLog" slot="actions"></mu-flat-button>
                <mu-flat-button primary label="关闭" @click="closeLogDialog"
                                slot="actions"></mu-flat-button>
            </mu-dialog>
        </div>
    </div>
</template>
{% endverbatim %}
<script src="{% static 'arbiter/js/index.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'arbiter/js/store.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'arbiter/js/components.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'arbiter/js/route.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'arbiter/js/app.js' %}" type="text/javascript" charset="utf-8"></script>
</body>
</html>